<template>
  <div>
    <nav-header></nav-header>
    <NavMain></NavMain>
    <NavFooter></NavFooter>
    <!-- <div>
      {{ list }}
    </div>
    <div>
      <button @click="goto">跳转路由</button>
    </div> -->
    <!-- <div>
      {{ name }}
    </div> -->
    <!-- <div @click="clickNum(100)">
      {{ num }}
    </div>
    <div @click="clickNum1(200)">
      {{ num1 }}
    </div> -->
    <!-- <div>
      {{ arr }}
    </div> -->
    <!--<div>
      {{ obj.name }}
    </div>-->
    <!-- <div>
      {{ obj }}
    </div> -->

    <!-- <div>
      {{ num }} --- {{ num1 }}
      两个数的和：{{ addNum }}
    </div>
    <div>
      <button @click="computedAddNum">改变计算属性</button>
    </div> -->
    {{ num }} --- {{ name }} --- {{ obj }}
  </div>
</template>

<script>
import NavHeader from '@/components/navHeader/NavHeader.vue'
import NavMain from '@/components/navMain/NavMain.vue'
import NavFooter from '@/components/navFooter/NavFooter.vue'
import { defineComponent, ref, reactive, toRefs, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'Home',
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  props: {

  },
  setup(props, ctx) {
    // let num = ref(10)
    // let num1 = ref(20)
    // let name = ref('jack')
    // let arr = ref(['a', 'b', 'c', 'd'])
    // let obj = ref({name: '张三', age: 33, gender: 'female'})

    // let data = reactive({
    //   name: 'jack',
    //   num: 10,
    //   num1: 20,
    //   age: '22',
    //   obj: {
    //     grade: 96,
    //     course: '数学'
    //   },
    //   arr: ['a', 'b', 'c', 'd']
    // })

    // 定义方法
    // const clickNum = (val) => {
    //   console.log(val)
    // }
    // const clickNum1 = (val) => {
    //   console.log(val)
    // }

    // const addNum = computed(() => {
    //   // 必须返回一个值，返回之前可以写一些逻辑代码
    //   return num.value + num1.value;
    // })
    // // 应用场景-购物车
    // const computedAddNum = () => {
    //   num.value += 1;
    //   num1.value += 2;
    // }

    let store = useStore()
    let list = computed(() => {
      return store.state.list
    })

    // router是全局路由对象
    const router = useRouter();
    // console.log(router)
    // route是当前路由对象
    const route = useRoute();
    // query传递过来的参数都是字符串类型
    // console.log(route.query.num);
    // console.log(typeof route.query.num);
    let num = ref(null);
    let name = ref('');
    let obj = ref({});
    console.log(route.query.obj)
    onMounted(() => {
      num.value = route.query.num * 1;
      name.value = route.query.name;
      obj.value = JSON.parse(route.query.obj)
    })

    console.log(route);
    const goto = () => {
      // push函数里面可以传入跳转的路径
      // router.push('/about')
      // router.back(): 回到上一页
      // router.forward(): 去到下一页
      // router.go(整数) 正数代表前进 负数代表后退
      router.push({
        path: '/detail' // 传参需要这种方式
      })
    }

    return {
      // num, name, arr, obj
      // ...toRefs(data),
      // num,
      // num1,
      // clickNum,
      // clickNum1,
      // addNum,
      // computedAddNum,
      // list,
      // goto,
      num,
      name,
      obj
    }
  }

})
</script>

<style scoped lang="scss"></style>